<template>
	<div id="goods">
		<search-header color="white" input-width="70%" v-model="keyword" v-on:search="onSearch()" :no-redirect="true">
			<i class="iconfont icon-left" @click="$router.back()"></i>
		</search-header>
        <ul class="filter-bar clearfix">
            <li :class="{active: order == ''}" @click="setOrder('', $event)">综合</li>
            <li :class="{active: order == 'solded desc'}" @click="setOrder('solded desc', $event)">销量</li>
            <li :class="{active: order.indexOf('price') != -1}" @click="setOrder('price');">价格<span :class="{caret: 1, 'caret-up': order == 'price'}"></span></li>
            <li :class="{active: order == 'id desc'}" @click="setOrder('id desc', $event)">新品</li>
        </ul>
        <div class="good-list">
        	<dl v-for="item in data" class="good-item clearfix" key="item.id" @click="$router.push('/goods/detail/'+item.id)">
        		<dt>
        			<img v-lazy="item.thumbnail">
        		</dt>
        		<dd>
        			<div class="title">{{item.title}}</div>
        			<div class="bottom">
        				<div class="pull-left">
        					<div class="text-price">£{{item.price}}</div>
        					<div class="text-assist"><small>销量{{item.solded}}笔</small></div>
        				</div>
        				<div class="pull-right" style="margin-top:10px;">
        					<i class="iconfont icon-cart add-cart"></i>
        				</div>
        			</div>
        		</dd>
        	</dl>
        	<div v-show="pages.next_page < 1" class="text-center">
        		已滑到最底部
        	</div>
        </div>
        <div class="fix-toolbar">
        	<router-link to="/cart" tag="div">
	        	<el-badge :value="$store.state.carts.length" class="item">
			  		<i class="iconfont icon-circle icon-cart"></i>
				</el-badge>
        	</router-link>
        	<div @click="backTop">
        		<i class="iconfont icon-circle icon-backtop"></i>
        	</div>
        </div>
        <div class="bottom-margin"></div>
	</div>
</template>

<script>
import SearchHeader from '~/components/SearchHeader.vue';
import api from '~/api/api.js';

export default {
	name: 'goods',
	components: {
		SearchHeader
	},
	data () {
		return {
			order: '',
			keyword: '',
			category_id: '',
			inLoading: false,
			pages: {
				next_page: 1,
				current_page: 0,
				total: 0
			},
			data: []
		}
	},
	created () {
		window.addEventListener('scroll', this.checkScroll);
		this.keyword = this.$route.query.keyword ? this.$route.query.keyword : '';
		this.category_id = this.$route.query.category_id ? this.$route.query.category_id : '';
		this.loadGoods();
	},
	beforeDestroy () {
		window.removeEventListener('scroll', this.checkScroll);
	},
	methods: {
		checkScroll () {
			let element = document.body;
			if (element.scrollHeight - window.scrollY === element.clientHeight) {
				this.loadGoods();
			}
		},
		// 初始化查找条件
		initCondition () {
			this.order = '';
			this.category_id = '';
			this.pages.next_page = 1;
			this.pages.current_page = 0;
			this.pages.total = 0;
		},
		backTop () {
			window.scrollTo(0, 0);
		},
		onSearch () {
			this.initCondition();
			this.loadGoods();
		},
		setOrder (order, event) {
			if (event) {
				if (event.target.className.indexOf('active') != -1) {
					return;
				}
			}

			let oldOrder = this.order;
			let newOrder = '';
			newOrder = order;
			if (oldOrder == 'price' && order == 'price') {
				newOrder = 'price desc';
			}

			this.initCondition();
			this.order = newOrder;
			this.loadGoods();
		},
		// 加载商品
		loadGoods () {
			var vue = this;
			if (this.pages.next_page < 1 || this.inLoading) {
				return;
			}
			vue.inLoading = true;
			api.get(`/goods/index?order=${vue.order}&keyword=${vue.keyword}&page=${vue.pages.next_page}&category_id=${vue.category_id}`).then(function (response) {
				vue.inLoading = false;
				let pages = response.data;
				for(let k in vue.pages) {
					vue.pages[k] = pages[k];
				}
				if (pages.current_page == 1) {
					vue.data = [];
				}
				vue.data = vue.data.concat(pages.data);
			}).catch(function (error) {
				vue.inLoading = false;
				alert('加载失败');
			});
		}
	}

}
</script>

<style scoped>
	.icon-left {
		padding-right: 5px;
	}
	.icon-circle {
		width: 28px;
		height: 28px;
		line-height: 28px;
		font-size: 20px;
	}

	.filter-bar {
		background-color: #f7f7f7;
		position: relative;
	}
	.filter-bar li {
		display: block;
		float: left;
		text-align: center;
		width: 24.9%;
		padding: 15px 0px;
	}

	.filter-bar li:last-child {
		border-left: 1px solid #8c8c8c;
	}

	.filter-bar li.active {
		color: #b21014;
	}

	.good-list {
		margin-top: 10px;
		padding: 15px;
	}

	.good-list .good-item {
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eaeaea;
	}

	.good-list .good-item dt {
		float: left;
	}
	.good-list .good-item dd {
		padding-left: 105px;
	}
	.good-list .good-item img {
		height: 100px;
		width: 100px;
	}
	.good-list .good-item .bottom {
		margin-top: 20px;
	}

	.fix-toolbar {
		position: fixed;
		bottom: 20px;
		right: 15px;
	}

	.fix-toolbar .iconfont {
		background: #fff;
		margin-bottom: 10px;
	}
</style>
